<div>
    <div class="modal_body">
        <div class="modal_mark"></div>
        <div class="modal_pagination">
            {{each(i,image) images}}
            <div class="modal_pagination_item" data-index="${i}"></div>
            {{/each}}
        </div>
        <div class="modal_content ">
            <div class="images_wrapper">
                {{each(i,image) images}}
                <div class="image_wrapper ">
                    <img src="${image.url}" alt=""
                         data-index="${i}"
                    />
                </div>
                {{/each}}
            </div>
        </div>
    </div>
</div>
<style>
    .modal_body {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 900;
    }

    .modal_body .modal_mark {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #222;
        opacity: .5;
    }

    .modal_body .modal_content {
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .modal_body .modal_content .images_wrapper {
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }

    .modal_body .modal_content .image_wrapper {
        height: auto;
        flex: 1;
        display: block;
        overflow: hidden;
    }

    .modal_body .modal_content .image_wrapper img {
        position: relative;
        max-height: 100%;
        max-width: 100%;
    }
    .modal_body .modal_pagination{
        position: fixed;
        z-index: 99;
        display: flex;
    }
    .modal_body .modal_pagination .modal_pagination_item{
        border-radius: 5px;
        background: #a5a5a5;
        width: 5px;
        height: 5px;
        margin-left: 5px;
    }
    .modal_body .modal_pagination .modal_pagination_item.active{
        background: #fff;
    }
</style>